<template>
  <div>
    <div class="my-counter">
      <button type="button" class="btn btn-light" @click="jianshaoFn">-</button>
      <input
        type="number"
        class="form-control inp"
        :value="goods_count"
        @change="sum"
      />
      <button type="button" class="btn btn-light" @click="addFn">+</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: Number,
    goods_count: Number,
  },
  data() {
    return {}
  },

  methods: {
    addFn() {
      this.$emit('add', this.id)
    },
    jianshaoFn() {
      this.$emit('jianshao', this.id)
    },
    sum(e) {
      // 事件对象
      this.$emit('sum', e.target.value, this.id)
      console.log(this.id)
    },
  },
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn,
  .inp {
    transform: scale(0.9);
  }
}
</style>
